<template>
  <div class="top-nav">
    <ul @mouseleave="handleMouseLeaveNav()">
      <li v-for="(item, index) in navList"
          @click="handleGoMenu(item, index)"
          @mouseenter="handleMouseEnter(item)"
          @mouseleave="handleMouseLeave(item)"
          :class="[ activeIndex === index ? 'top-nav-active' : '' ]"
          :key="index">
        <span>{{ item.cmsNavLocal && item.cmsNavLocal.localName }}</span>
        <div v-if="item.children && item.children.length > 0" v-show="item.showTab" class="top-nav-more">
          <div class="top-nav-more-wrap">
            <div class="top-nav-more-wrap-img">
              <img :src="showImg">
            </div>
            <dl v-for="(child, idx) in item.children" :key="idx" class="top-nav-more-wrap-item">
              <dt @click.stop="handleGoItemMenu(child)">{{ child.cmsNavLocal && child.cmsNavLocal.localName }}</dt>
              <dd v-if="child.children && child.children.length > 0">
                <span v-for="(prod, idex) in child.children" @click.stop="handleGoItemMenu(prod)" @mouseenter="handleShowIcon(prod)" :key="idex">{{ prod.cmsNavLocal && prod.cmsNavLocal.localName }}</span>
              </dd>
            </dl>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup name="TopNav">
import {getNavData} from "@/api/nav.js";
import {useRoute, useRouter} from "vue-router";
import {getUrlPath, getUrlParam} from "../../utils/ruoyi.js";

const baseUrl = import.meta.env.VITE_APP_BASE_API;

const route = useRoute();
const router = useRouter();

const activeIndex = ref(0);
const navList = ref([]);

const showImg = ref('')

const matchNavIndex = () => {
  activeIndex.value = navList.value.findIndex(x => route.path.indexOf(x.navLink) >= 0);
}

const handleGoMenu = (item, index) => {
  activeIndex.value = index;
  // 跳转链接
  router.push({
    path: item.navLink
  })
}

const handleGoItemMenu = (item) => {
  const path = getUrlPath(item.navLink);
  const param = getUrlParam(item.navLink);

  // 跳转链接
  router.push({
    path: path,
    query: {
      ...param
    }
  });
  // 打开新窗口逻辑
  // const routeData = this.$router.resolve({
  //   name: 'TargetRouteName', // 目标路由的名称
  //   params: { /* 如果需要的话，提供路由参数 */ },
  //   query: { /* 如果需要的话，提供查询参数 */ }
  // });
  // // 打开新窗口
  // window.open(routeData.href, '_blank');
}

const handleMouseEnter = (item) => {
  item.showTab = true;
  activeIndex.value = -1;
}

const handleMouseLeave = (item) => {
  item.showTab = false;
  showImg.value = '';
}

const handleMouseLeaveNav = () => {
  matchNavIndex();
}

// 切换图标触发
const handleShowIcon = (row) => {
  if (row.cmsNavLocal && row.cmsNavLocal.localIcon) {
    showImg.value = baseUrl + row.cmsNavLocal.localIcon
  } else {
    showImg.value = '';
  }
}

const getLanguage = () => {
  const userLang = localStorage.getItem('userLanguage');
  if (userLang) {
    return userLang;
  }
  const language = navigator.language || navigator.userLanguage
  if (language) {
    return language;
  }
  return 'en-US';
}

const getNavTree = () => {
  getNavData(getLanguage()).then(res => {
    if (res.code === 200) {
      navList.value = JSON.parse(res.data);
      matchNavIndex();
    }
  })
}

onMounted(() => {
  // 挂载函数
  getNavTree();
})

watch(() => route.path, () => {
  matchNavIndex();
});

</script>

<style lang="scss" scoped>
.top-nav {
  box-sizing: border-box;
  user-select: none;
  position: relative;

  ul {
    display: flex;
    align-items: center;
    height: 80px;

    li {
      margin-right: 30px;
      font-size: 16px;
      height: 80px;
      line-height: 80px;
      padding: 0 10px;
      cursor: pointer;

      .top-nav-more {
        position: absolute;
        right: 0;
        top: 81px;
        width: 100vw;
        min-height: 200px;
        background-color: #ffffff;
        z-index: 9999;

        &-wrap {
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 20px;
          color: rgb(17, 80, 116);

          &-img {
            margin-right: 80px;
            display: flex;
            align-items: center;

            img {
              width: 100px;
            }
          }

          > dl {
            margin: 0 50px 0 0;
            padding: 0;
            line-height: 40px;

            > dt {
              font-weight: 600;
            }

            > dd {
              display: flex;
              flex-flow: column;
              margin-left: 0;
              color: rgb(2, 81, 129);

              span:hover {
                color: rgb(210, 1, 2);
              }
            }
          }

          dl:last-child {
            margin: 0;
          }
        }
      }
    }

    li.top-nav-active {
       color: rgb(210, 1, 2);
       border-bottom: 4px solid rgb(210, 1, 2);
    }

    li:hover {
      color: rgb(210, 1, 2);
      border-bottom: 4px solid rgb(210, 1, 2);
    }
  }


}
</style>
